<template>
  <div class="order-info">
    <h1>详细信息</h1>
    <el-row class="info_row">
      <el-col :span="8">订单编号：{{order.serial_number}}</el-col>
      <el-col :span="8">下单时间：{{order.created_at | conver_time}}</el-col>
      <el-col :span="8">下单方式：{{order.is_company ? '代理下单' : '自助下单'}}</el-col>
    </el-row>
    <el-row class="info_row">
      <el-col :span="8">
        客户姓名：{{order.name}}
        <el-button type="text" @click="openDialog('name', order.name)">修改</el-button>
      </el-col>
      <el-col :span="8">
        联系方式：{{order.tel}}
        <el-button type="text" @click="openDialog('tel', order.tel)">修改</el-button>
      </el-col>
    </el-row>
    <el-row class="info_row">
      <el-col :span="8">品牌：{{order.company_name}}</el-col>
      <el-col :span="8">
        材质：{{order.material}}
        <el-button type="text" @click="openDialog('material', order.material)">修改</el-button>
      </el-col>
      <el-col :span="8">
        预估面积：{{order.square}}㎡
        <el-button type="text" @click="openDialog('square', order.square)">修改</el-button>
      </el-col>
    </el-row>
    <el-row class="info_row">
      <el-col :span="24">
        详细地址：{{order.address}}
        <el-button type="text" @click="openDialog('address', {prefix: [order.province, order.city, order.area], street: order.street})">修改</el-button>
      </el-col>
    </el-row>
    <el-row class="info_row">
      <el-col :span="24">
        备注：{{order.remark || '无'}}
        <el-button type="text" @click="openDialog('remark', order.remark)">修改</el-button>
      </el-col>
    </el-row>
    <edit-dialog ref="dialog"></edit-dialog>
  </div>
</template>

<script>
import EditDialog from './editDialog'
import { mapGetters, mapActions } from 'vuex'

export default {
  components: {
    EditDialog,
  },
  data: () => ({
    activeAttribute: ''
  }),
  computed: {
    ...mapGetters('orders', [
      'order'
    ])
  },
  methods: {
    openDialog(key, value) {
      this.$refs.dialog.openDialog(key, value)
    }
  }
}
</script>
